@import "@/styles/flex-init.scss";

.select-dialog {
  width: 100%;
  min-height: 42px;
  height: auto;

  .search-head-form {
    @extend .f-j-between;
    width: 100%;
    height: 40px;
    background-color: $fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .special-search {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 0 !important;
      background-color: var(--primary-plain);
      color: var(--primary);
      border-radius: 50%;
      margin-left: 5px;
    }

    .active-special-search {
      background-color: var(--primary);
      color: #fff;
    }

    .key,
    .key1 {
      height: 25px;
    }
    .key {
      width: 95%;
    }
    .key1 {
      width: 100%;
    }

    > view {
      @extend .f-r-center;
      color: var(--primary);
      width: 100%;
      height: 35px;

      > view {
        margin-right: 10px;
      }
    }

    .more {
      width: 5%;
    }
  }

  .search-focus-key {
    width: 100%;
    min-height: 100px;
    background-color: #fff;
    box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.1);

    .title {
      font-weight: bold;
      padding-left: 10px;
      font-weight: 14px;
    }

    .key-box {
      display: flex;
      padding: 10px 20px;
      flex-wrap: wrap;

      > view {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary-plain);
        color: var(--primary);
        margin-right: 10px;
        border-radius: 5px;
        font-size: 12px;
        height: 20px;
        width: auto;
        padding: 4px 20px;
        margin-bottom: 5px;
      }
    }
  }

  .search-form-box {
    width: 100%;
    z-index: 999;
    background-color: var(--box-bg);
    box-shadow: 0 9px 12px 0 rgba(0, 0, 0, 0.1);

    .btn {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 50px;
      .reset,
      .search {
        height: 30px;
        .iconfont {
          font-size: 14px;
        }
        font-size: 14px;
        color: var(--primary-text-value);
      }
      .reset {
        border: var(--primary-btn-border);
      }
      .search {
        background-color: var(--primary);
        color: $fff;
      }
    }

    .pro-form {
      min-height: 100%;
      overflow-x: inherit;
    }
  }

  .hide-search {
    transform: translateY(-500px);
    opacity: 0;
    transition: 0.5s;
  }

  .display-search {
    opacity: 1;
    transition: 0.5s;
    transform: translateY(0px);
  }
}
